<template>
	<view class="content">
	<view class="square-color-finder" v-for="(item,index) in info1" :key="index" @click="PickerRgb">
		   <view class="min-square" :class="index == 0 ? 'R' : (index == 1 ? 'G':'B')">{{item.id}}</view>
			 <view class="max-square" :class="index == 0 ? 'R' : (index == 1 ? 'G':'B')">{{item.val}}</view>
	</view>
	<ColorPicker @sendInfo="sendInfo"></ColorPicker>
	<ShowModal v-show="allow" @sendDataR="sendDataR" @sendDataG="sendDataG" @sendDataB="sendDataB" @AllowData="AllowData"></ShowModal>

	
	</view>
</template>

<script>
	import { reactive,ref ,onUpdated,defineEmits } from "vue";
	import ColorPicker from '../../components/picker-color/index.vue'
	import ShowModal from '../../components/show-modal/index.vue'
	export default {
		components:{
			 ColorPicker,
			 ShowModal
		},
	setup(props, { emit, attrs, slots }){
		const allow = ref(false);
		
		const boolean = reactive({
			Show:false
		});

    let info = reactive({
			r:'',
			g:'',
			b:'' 
		})
	   let info1 = reactive([
			 {
				 id: 'R',
				 val: info.r,
				 
			 },
			 {
				   id: 'G',
					 val:info.b,
				 	
			 },
			 {
				 id: 'B',
				 val: info.g,
				 
			 }
		 ]
			
		 )
		 function sendInfo(value) {
			 info.r=value.r;
			 info.g=value.g;
			 info.b=value.b;
			 info1[0].val = info.r 
			 info1[1].val = info.g 
			 info1[2].val = info.b 
			 console.log(info1[0].val)
			 console.log('handle',value);
			 console.log(info.r)
			 console.log(allow.value)
			
		 }
		function PickerRgb(){
			boolean.Show = true,
			console.log(boolean.Show )
			allow.value = true
		}
		function sendDataR(valR){
			console.log(valR)
			info1[0].val = valR
		}
		function sendDataG(valG){
			console.log(valG)
			info1[1].val = valG
		}
		function sendDataB(valB){
			console.log(valB)
			info1[2].val = valB
		}
		function AllowData(e){
		//父传子，子再传父的值（值在子组件中发生了改变）
			allow.value = e;
			console.log(allow.value)
		}
		 return {
			 boolean,
			 info,
			 info1,
			 sendInfo,
			 PickerRgb,			
			 sendDataR,
			 sendDataG,
			 sendDataB,
			 allow,
			 AllowData
			 
			 
		 }
			  },
			
		   
			}
		
</script>

<style lang="less">
	.content{
		.square-color-finder{
			width: 125rpx;
			height: 30rpx;
			margin:5rpx 0 0 30rpx;
			display: flex;
			justify-content: space-between;
			font-size: 20rpx;
			text-align: center;
			.min-square{
				width: 40rpx;
				height: 30rpx;
			}
			.max-square{
				width: 80rpx;
				height: 30rpx;
					
			}
			.R{
					background-color: red;
			}
			.G{
					background-color: green;
			}
			.B{
					background-color: blue;
			}
			
		}
	
	}

	
</style>
